<template>
  <div>
    <q-form class="dialog_card column" ref="editRef">
      <!-- {{ isform }} -->
      <div class="row q-col-gutter-x-md dialog_form q-pa-md">
        <div class="col-12">
          <h5>
            <q-icon color="red" name="star" />
            店铺公司名称：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输入店铺公司名称']"
            dense
            lazy-rules
            outlined
            type="text"
            v-model="isform.company_name"
            style="width: 50%"
          />
        </div>

        <div class="col-12">
          <h5>
            <q-icon color="red" name="star" />
            店主用户名：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输入店铺公司名称']"
            dense
            lazy-rules
            outlined
            type="text"
            v-model="isform.user_name"
            style="width: 50%"
          />
        </div>

        <div class="col-4">
          <h5>
            <q-icon color="red" name="star" />
            省：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输入省名称']"
            dense
            lazy-rules
            outlined
            type="text"
            v-model="isform.province_id"
          />
        </div>

        <div class="col-4">
          <h5>
            <q-icon color="red" name="star" />
            城市：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输入城市名称']"
            dense
            lazy-rules
            outlined
            type="text"
            v-model="isform.city_id"
          />
        </div>

        <div class="col-4">
          <h5>
            <q-icon color="red" name="star" />
            区：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输入区名称']"
            dense
            lazy-rules
            outlined
            type="text"
            v-model="isform.area_id"
          />
        </div>

        <div class="col-12">
          <h5>
            <q-icon color="red" name="star" />
            街道：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输入街道名称']"
            dense
            lazy-rules
            outlined
            type="text"
            v-model="isform.district_id"
            style="width: 50%"
          />
        </div>

        <div class="col-12">
          <h5>
            <q-icon color="red" name="star" />
            公司详细地址：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输公司详细地址']"
            dense
            lazy-rules
            outlined
            type="text"
            v-model="isform.address_detail"
          />
        </div>

        <div class="col-12">
          <h5>
            <q-icon color="red" name="star" />
            公司电话：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输入公司电话']"
            dense
            lazy-rules
            outlined
            type="text"
            v-model="isform.company_phone"
            style="width: 50%"
          />
        </div>

        <div class="col-12">
          <h5><q-icon name="star" color="red" />公司类型：</h5>
          <q-select
            outlined
            dense
            :rules="[(val) => val !== null || '请选择公司类型']"
            v-model="isform.company_type"
            option-value="id"
            option-label="name"
            :options="[
              { id: 0, name: '私企' },
              { id: 1, name: '个体' },
              { id: 2, name: '外企' },
              { id: 3, name: '中外合资' },
            ]"
            emit-value
            map-options
            style="width: 50%"
          >
          </q-select>
        </div>
      </div>
    </q-form>
  </div>
</template>

<script lang="ts" setup>
import emitter from '@/components/eventbus';
import { goodsTagAdd, applyEdit } from '@/api/shop';
import { useQuasar } from 'quasar';

interface Props {
  form: {
    apply_id?: number; //ID
    company_name?: string; //店铺公司名称
    user_name?: string; //店主用户名
    province_id?: string; //省
    city_id?: string; //城市
    area_id?: string; //区
    district_id?: string; //街道
    address_detail?: string; //公司详细地址
    company_phone?: string; //公司电话
    company_type?: string; //类型:私企.个体.外企.中外合资
  };
}

const props = withDefaults(defineProps<Props>(), {
  form: () => ({}),
});
const editRef = ref();
const $q = useQuasar();

//接收兄弟组件传递事件
emitter.on('saveData', async () => {
  IsValidate();
});
//表单验证
const IsValidate = () => {
  if (editRef.value) {
    editRef.value.validate().then(async function (validate: any) {
      if (validate) {
        onSubmit();
      } else {
      }
    });
  }
};
//提交数据
const onSubmit = async () => {
  if (isform.value.apply_id) {
    const res: any = await applyEdit(isform.value);
    info(res);
  } else {
    // const res: any = await goodsTagAdd(isform.value);
    // info(res);
  }
};
//信息返回
const info = (res: any) => {
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    emit('backList');
  }
};

const emit = defineEmits(['update:form', 'backList']);

const isform: any = computed({
  set(value: any) {
    // emit('update:form', value);
  },
  get() {
    return props.form;
  },
});
</script>
<style lang="scss" scoped></style>
